import React, { FC, ReactElement } from 'react';
import { ITodo } from '../../../../types/todo';
import TodoListItem from './TodoListItem';

interface IProps{
  todoList:ITodo[],
  removeTodo:(id:number)=>void,
  completeTodo:(id:number)=>void
}

const TodoList:FC<IProps> = ({
  todoList,removeTodo,completeTodo
}):ReactElement => {
  return (
    <div className='todo-list'>
        {
          todoList && todoList.length > 0 ?
          todoList.map(item=>{
            return(
              <TodoListItem 
                key={item.id} 
                todo={item}
                removeTodo = {removeTodo}
                completeTodo = {completeTodo}
                />
            )
          }):null
        }
    </div>
  )
}

export default TodoList;